<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>STAT HUB - 应用列表</title>
    <link href="stylesheets/stat.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script>
        var _desc = ['警告', '停止', '正常', '错误'];
        
        $(document).ready(function () {
            $.get('/v1/node', function(node, status, xhr) {
                $('#hostname').text(node.hostname);
                $('#address').text(get_hostname(node));
                var os = node.os;
                if (os) {
                    $('#cpucore').text(os.cpus);
                }
                var disk_total = 0;
                $.each(node.disks, function(i, disk) {
                    disk_total += disk.total / 1024 / 1024 / 1024;
                });
                $('#diskspace').text(parseInt(disk_total));
                var memory = node.memory;
                if (memory) {
                    memory = memory.total / 1024 / 1024 / 1024;
                    $('#memory').text(parseInt(memory));
                } else {
                    $('#memory').text(0);
                }
            });
            
            refresh_list();
            setInterval(function() {
                refresh_list();
                refresh_rows();
            }, 5000);
        });
        
        function delete_app(name) {
            if (confirm('是否要删除应用 ' + name + ' ，这个操作无法恢复？')) {
                $.ajax({
                    url: '/v1/app/' + name,
                    type: 'DELETE',
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(data, status, xhr) {
                        alert('已经删除应用 ' + name);
                    },
                    error: function(xhr, status, error) {
                        alert('保存失败，状态：' + error + ', 信息: ' + xhr.responseJSON.message);
                    }
                });
            }
        }
        
        function stop_app(name) {
            if (confirm('是否要停止应用 ' + name + ' ？')) {
                $.post('/v1/app/' + name + '/_stop', function(data, status, xhr) {
                    alert('已经对应用 ' + name + ' 发出停止指令');
                });
            }
        }

        function start_app(name) {
            $.post('/v1/app/' + name + '/_start', function(data, status, xhr) {
                alert('已经对应用 ' + name + ' 发出启动指令');
            });
        }

        function scale_app(name) {
            $.get('/v1/app/' + name + '/_scale', function(d, status, xhr) {
                var scale = prompt('输入应用 ' + name + ' 的进程数量：', d);
                if (scale > '') {
                    var url = '/v1/app/' + name + '/_scale?num=' + scale;
                    $.post(url, function(data, status, xhr) {
                        alert('更新应用 ' + name + ' 的进程数量成功');
                    });
                }
            });
        }
        
        function restart_all() {
            if (confirm('已经停止的应用仍然保持停止状态，需要继续吗？')) {
                $.get('/v1/proc', function(pids, status, xhr) {
                    var count = 0;
                    $.each(pids, function(i, pid) {
                        var url = '/v1/proc/' + pid + '/_kill';
                        $.post(url, function(data, status) {
                            count ++;
                        });
                    });
                    alert('已经发出重启指令');
                });
            }
        }
        
        function stop_all() {
            if (confirm('停止所有应用，需要继续吗？')) {
                var keys = get_table_keys();
                var count = 0;
                $.each(keys, function(i, key) {
                    $.post('/v1/app/' + key + '/_stop', function(data, status, xhr) {
                        count ++;
                    });
                });
                alert('已经发出停止指令');
            }
        }
        
        function refresh_rows() {
            var keys = get_table_keys();
            $.each(keys, function(i, key) {
                refresh_row(key);
            });
        }
        
        function refresh_row(name) {
            $.get('/v1/app/' + name, function(app, status, xhr) {
                $.get('/v1/app/' + name + '/_scale', function(scale, status, xhr) {
                    $.get('/v1/app/' + name + '/proc', function(ps, status, xhr) {
                        update_row(name, app.start, scale, ps.length);
                    });
                });
            });
        }
        
        function refresh_list() {
            $.get('/v1/app', function(names, status, xhr) {
                //remove deleted app
                var keys = get_table_keys();
                $.each(keys, function(i, key) {
                    if ($.inArray(key, names) < 0) {
                        remove_row(key);
                    }
                });
                
                //add new app
                $.each(names, function(i, name) {
                    if ($.inArray(name, keys) < 0) {
                        add_row(name);
                        refresh_row(name);
                    }
                });
            });
        }
        
        function get_table_keys() {
            var keys = new Array();
            var key = '';
            $("#statustable tr td:nth-child(1)").each(function () {
                key = $(this).text();
                if (key) {
                    keys.push(key);
                }
            });
            return keys;
        }
        
        function update_row(app_name, start, scale, ps) {
            var status = 0;
            var status_desc;
            if (start && scale > 0) {
                if (ps >= scale) {
                    status = 2;
                } else if (scale > ps && ps > 0) {
                    status = 0;
                } else if (ps == 0) {
                    status = 3;
                }
            } else {
                status = 1;
            }
            var status_desc = _desc[status];
            
            //status image
            $('#status_text_' + app_name).attr('class', 'status' + status);
            $('#status_text_' + app_name).text(status_desc);
            
            //process count
            $('#count_' + app_name).html(start && ps>0 ? '<a href="proc.html?app=' + app_name + '">' + ps  + '</a>': '停止');
            
            //scale
            $('#scale_' + app_name).text(scale);

            //action            
            if (start) {
                $('#action_stop_' + app_name).show();
                $('#action_start_' + app_name).css('display', 'none');
            } else {
                $('#action_stop_' + app_name).css('display', 'none');
                $('#action_start_' + app_name).show();
            }
        }
        
        function remove_row(key) {
            var keys = get_table_keys();
            var pos = $.inArray(key, keys);
            if (pos >= 0) {
                $("#statustable tr:gt(0):eq(" + pos + ")").remove();
            }
        }
        
        function add_row(name) {
            var row = '<tr id="tr_' + name + '" class="">';
            row += '<td class="hidden">' + name + '</td>';
            row += '<td class="status"><span id="status_text_' + name + '" class=""></span></td>';
            row += '<td>' + name + '</td>';
            row += '<td><span id="count_' + name + '"></span></td>';
            row += '<td><span id="scale_' + name + '"></span></td>';
            row += '<td class="action">';
            row += '<ul>';
            row += '<li">';
            row += '<a href="javascript:void(0)" onclick="start_app(\'' + name + '\')" id="action_start_' + name + '" style="display:none">启动</a> ';
            row += '</li>';
            row += '<li">';
            row += '<a href="javascript:void(0)" onclick="stop_app(\'' + name + '\')" id="action_stop_' + name + '" style="display:none">停止</a> ';
            row += '</li>';
            row += '<li">';
            row += '<a href="javascript:void(0)" onclick="scale_app(\'' + name + '\')" id="action_scale">调整计划</a> ';
            row += '</li>';
            row += '<li">';
            row += '<a href="app.html?name=' + name + '" id="action_edit">修改</a> ';
            row += '</li>';
            row += '<li">';
            row += '<a href="javascript:void(0)" onclick="delete_app(\'' + name + '\')" id="action_delete">删除</a> ';
            row += '</li>';
            row += '</ul>';
            row += '</td>';
            row += '</tr>';
            $("#statustable tr:last").after(row);
        }
    </script>
</head>
<body>
<div id="wrapper">

    <div id="header">
        <a href="/"><img src="images/stat.png" alt="Status" /></a>
        <p id="nodestatus">
            主机：<strong><span id="hostname"></span></strong> <span id="address"></span> - 
            CPU：<span id="cpucore"></span> 核 - 
            磁盘：<span id="diskspace"></span> GB - 
            内存：<span id="memory"></span> GB
        </p>
    </div>

    <div id="content">
        <div class="hidden" id="statusmessage">&nbsp;</div>
        <ul id="buttons" class="clr">
            <li id="restart_all"><a onclick="restart_all()" href="javascript:void(0)">&nbsp;</a></li>
            <li id="stop_all"><a onclick="stop_all()" href="javascript:void(0)">&nbsp;</a></li>
            <li id="newapp"><a href="app.html">&nbsp;</a></li>
        </ul>
        <table cellspacing="0" id="statustable">
            <tr>
                <th class="hidden"></th>
                <th class="state">状态</th>
                <th class="name">名称</th>
                <th class="count">实际进程数</th>
                <th class="scale">计划进程数</th>
                <th class="action">操作</th>
            </tr>
        </table>
    </div>
    <br/>
    <div class="push">
    </div>
</div>

<div id="footer" class="clr">
    <div class="left">
        <a href="/">STAT HUB</a> <span id="supervisor_version">#</span>
    </div>
    <div class="right">
        &amp;copy; 2006-<span id="copyright_date">#</span> <strong>lane.cn@gmail.com</strong>
    </div>
</div>
</body>
</html>
